﻿@page "/test2"

<PageTitle>Css Sticky Table</PageTitle>

<h4>Test2</h4>

<div id="wrapper">
    <table class="">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>7</td>
                <td>7</td>
                <td>7</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td>8</td>
                <td>8</td>
                <td>8</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>9</td>
                <td>9</td>
                <td>9</td>
                <td>9</td>
            </tr>
            <tr>
                <td>10</td>
                <td>10</td>
                <td>10</td>
                <td>10</td>
                <td>10</td>
            </tr>
        </tbody>
    </table>
</div>

<style>
    #wrapper {
        width: 400px;
        height: 200px;
        overflow: auto;
    }

    table {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
    }

        /* 为所有 cell 设置边框 */
        table tr th,
        table tr td {
            border: 2px solid;
        }

        /* 固定表头 */
        table thead th {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            background-color: #edecec;
        }

        /* here is the trick */

        /* 第1个 tbody 中的第1个 tr 中的所有 td  */
        /* 即 tbody 的第一行，border-top 设置为 none */
        table tbody:nth-of-type(1) tr:nth-of-type(1) td {
            border-top: none !important;
        }

        /* 通过 shadow 为表头设置上下边框 */
        table thead th {
            border-top: none !important;
            border-bottom: none !important;
            box-shadow: inset 0 2px 0 #000000, inset 0 -2px 0 #000000; /* 上下线条 */
            padding: 2px 0;
        }


        /* and one small fix for weird FF behavior, described in https://stackoverflow.com/questions/7517127/ */

        table thead th {
            background-clip: padding-box
        }
</style>

@code {

}
